import React, {Component} from 'react';
import {AxioInstance} from "../../api/AxiosHelper";
import {GET_NEWS_DETAILS} from "../../api/APIURLDefine";
import moment from 'moment';
import "./index.css"

class News extends Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            title: "",
            content: "",
            author: "",
            time: ""
        }
    }

    componentDidMount() {
        var params = new URLSearchParams(this.props.history.location.search);
        var id = 1;
        if (params.has("id")) {
            id = parseInt(params.get("id"));
        }

        AxioInstance.get(`${GET_NEWS_DETAILS}/${id}`).then((data: any) => {
            this.setState({
                title: data.title,
                content: data.content,
                author: data.author,
                time: data.updatedTime
            });
        }).catch((e) => console.error(e));
    }

    render() {
        const {title, content, author, time} = this.state;
        return (
            <div className="article-back">
                <div className="article-container">
                    <div className="article-header">
                        <div className="article-title">
                            {title}
                        </div>
                        <div className="news-author-container">
                            <div>作者&nbsp;:&nbsp;{author}</div>
                            <div>发布时间&nbsp;:&nbsp;{moment(time).format("YYYY-MM-DD")}</div>
                        </div>
                    </div>
                    <div className="article-body" dangerouslySetInnerHTML={{__html: content}}>
                    </div>
                </div>

            </div>
        );
    }
}

export default News;